// 聊天功能的JavaScript代码
document.addEventListener('DOMContentLoaded', function() {
    const chatBox = document.getElementById('chatBox');
    const messageInput = document.getElementById('messageInput');
    const sendBtn = document.getElementById('sendBtn');
    const clearBtn = document.getElementById('clearBtn');
    const currentModeSpan = document.getElementById('currentMode');
    const modeItems = document.querySelectorAll('.dropdown-item');
    
    let currentMode = 'stream'; // 默认使用流式对话
    let eventSource = null;
    
    // 初始化
    initTextarea();
    loadChatHistory();
    
    // 监听发送按钮点击事件
    sendBtn.addEventListener('click', sendMessage);
    
    // 监听清除按钮点击事件
    clearBtn.addEventListener('click', clearChat);
    
    // 监听输入框事件
    messageInput.addEventListener('keydown', function(e) {
        // Enter发送，Shift+Enter换行
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
        
        // 自动调整高度
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });
    
    // 监听模式选择
    modeItems.forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有active类
            modeItems.forEach(i => i.classList.remove('active'));
            
            // 添加active类到当前项
            this.classList.add('active');
            
            const mode = this.getAttribute('data-mode');
            currentMode = mode;
            currentModeSpan.textContent = mode === 'stream' ? '流式对话' : '普通对话';
        });
    });
    
    // 初始化textarea自动高度调整
    function initTextarea() {
        messageInput.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
    }
    
    // 发送消息
    function sendMessage() {
        const message = messageInput.value.trim();
        if (!message) return;
        
        // 添加用户消息到聊天框
        appendMessage(message, 'user-message', null, true);
        
        // 添加AI正在输入的提示
        const loadingDiv = document.createElement('div');
        loadingDiv.className = 'ai-message';
        loadingDiv.innerHTML = '<div class="message-content"><div class="chat-loading"></div>思考中...</div>';
        chatBox.appendChild(loadingDiv);
        
        // 滚动到底部
        scrollToBottom();
        
        // 清空输入框并重置高度
        messageInput.value = '';
        messageInput.style.height = 'auto';
        
        // 根据当前模式选择API
        if (currentMode === 'stream') {
            useStreamAPI(message, loadingDiv);
        } else {
            useChatAPI(message, loadingDiv);
        }
    }
    
    // 使用流式API
    function useStreamAPI(message, loadingDiv) {
        // 关闭之前的连接
        if (eventSource) {
            eventSource.close();
        }
        
        // 创建新的SSE连接
        eventSource = new EventSource(`/stream?message=${encodeURIComponent(message)}`);
        
        let responseText = '';
        let startTime = Date.now();
        let displayedText = ''; // 用于保存当前已显示的文本
        let typingSpeed = 10; // 打字速度(ms)
        let typingTimer = null; // 打字定时器
        
        eventSource.onmessage = function(event) {
            if (loadingDiv) {
                // 第一条消息时，移除loading提示
                chatBox.removeChild(loadingDiv);
                loadingDiv = null;
                
                // 创建AI回复的消息容器
                appendMessage('', 'ai-message', 'aiResponse');
            }
            
            // 获取消息内容并附加到回复中
            const aiResponseDiv = document.getElementById('aiResponse');
            if (aiResponseDiv) {
                // 收到新内容，更新完整响应文本
                responseText += event.data;
                
                // 清除现有的打字定时器
                if (typingTimer) {
                    clearInterval(typingTimer);
                }
                
                // 启动打字机效果
                const messageContent = aiResponseDiv.querySelector('.message-content');
                let charIndex = displayedText.length;
                
                typingTimer = setInterval(() => {
                    // 如果已经显示了所有文本，停止定时器
                    if (charIndex >= responseText.length) {
                        clearInterval(typingTimer);
                        return;
                    }
                    
                    // 更新显示的文本，每次添加一个字符
                    displayedText = responseText.substring(0, charIndex + 1);
                    messageContent.innerHTML = formatMessage(displayedText);
                    
                    // 如果有代码块，应用语法高亮
                    if (messageContent.querySelectorAll('pre code').length > 0) {
                        highlightCode();
                        addCopyButtons();
                    }
                    
                    // 移动到下一个字符
                    charIndex++;
                    
                    // 滚动到底部
                    scrollToBottom();
                }, typingSpeed);
            }
        };
        
        eventSource.onerror = function() {
            eventSource.close();
            
            if (loadingDiv) {
                chatBox.removeChild(loadingDiv);
            }
            
            if (responseText === '') {
                appendMessage('抱歉，发生了错误，请稍后再试。', 'system-message');
            } else {
                // 停止打字效果
                if (typingTimer) {
                    clearInterval(typingTimer);
                }
                
                // 确保显示完整内容
                const aiResponseDiv = document.getElementById('aiResponse');
                if (aiResponseDiv) {
                    aiResponseDiv.querySelector('.message-content').innerHTML = formatMessage(responseText);
                    
                    // 更新时间信息
                    const timeElement = aiResponseDiv.querySelector('.message-time');
                    if (timeElement) {
                        const responseTime = ((Date.now() - startTime) / 1000).toFixed(1);
                        timeElement.textContent = `${formatTime(new Date())} · ${responseTime}s`;
                    }
                }
                // 移除ID以便下次生成新回复
                aiResponseDiv.removeAttribute('id');
            }
            
            // 保存聊天历史
            saveChatHistory();
            
            // 滚动到底部
            scrollToBottom();
        };
    }
    
    // 使用普通聊天API
    function useChatAPI(message, loadingDiv) {
        const startTime = Date.now();
        
        fetch(`/chat?message=${encodeURIComponent(message)}`)
            .then(response => response.text())
            .then(data => {
                // 计算响应时间
                const responseTime = ((Date.now() - startTime) / 1000).toFixed(1);
                
                // 移除loading提示
                if (loadingDiv) {
                    chatBox.removeChild(loadingDiv);
                }
                
                // 添加AI回复
                appendMessage(data, 'ai-message', null, false, responseTime);
                
                // 应用语法高亮
                highlightCode();
                addCopyButtons();
                
                // 保存聊天历史
                saveChatHistory();
                
                // 滚动到底部
                scrollToBottom();
            })
            .catch(error => {
                console.error('Error:', error);
                
                // 移除loading提示
                if (loadingDiv) {
                    chatBox.removeChild(loadingDiv);
                }
                
                // 添加错误提示
                appendMessage('抱歉，发生了错误，请稍后再试。', 'system-message');
                
                // 保存聊天历史
                saveChatHistory();
                
                // 滚动到底部
                scrollToBottom();
            });
    }
    
    // 添加消息到聊天框
    function appendMessage(content, className, id = null, isUser = false, responseTime = null) {
        const messageDiv = document.createElement('div');
        messageDiv.className = className;
        if (id) {
            messageDiv.id = id;
        }
        
        // 当前时间
        const now = new Date();
        const formattedTime = formatTime(now);
        
        // 创建消息内容元素
        const messageContent = document.createElement('div');
        messageContent.className = 'message-content';
        
        // 添加消息内容
        if (className === 'system-message') {
            messageContent.innerHTML = `<i class="fas fa-info-circle mr-2"></i>${content}`;
        } else {
            messageContent.innerHTML = formatMessage(content);
        }
        
        // 添加消息到DOM
        messageDiv.appendChild(messageContent);
        
        // 添加时间标记
        const timeElement = document.createElement('div');
        timeElement.className = 'message-time';
        timeElement.textContent = responseTime ? `${formattedTime} · ${responseTime}s` : formattedTime;
        messageDiv.appendChild(timeElement);
        
        // 为非系统消息添加操作按钮
        if (className !== 'system-message') {
            const actionsDiv = document.createElement('div');
            actionsDiv.className = 'message-actions';
            
            // 复制按钮
            const copyBtn = document.createElement('button');
            copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
            copyBtn.title = '复制消息';
            copyBtn.addEventListener('click', function() {
                copyToClipboard(content);
                showToast('已复制到剪贴板');
            });
            
            actionsDiv.appendChild(copyBtn);
            messageDiv.appendChild(actionsDiv);
        }
        
        chatBox.appendChild(messageDiv);
        
        // 滚动到底部
        scrollToBottom();
    }
    
    // 格式化消息，支持Markdown格式
    function formatMessage(content) {
        if (!content) return '';
        
        // 使用marked.js进行Markdown渲染
        if (window.marked) {
            return marked.parse(content);
        }
        
        // 如果marked不可用，使用简单的格式处理
        // 处理代码块
        content = content.replace(/```(\w*)([\s\S]*?)```/g, function(match, language, code) {
            return `<pre><code class="language-${language}">${escapeHtml(code.trim())}</code></pre>`;
        });
        
        // 处理换行符
        content = content.replace(/\n/g, '<br>');
        
        return content;
    }
    
    // 应用代码高亮
    function highlightCode() {
        if (window.hljs) {
            document.querySelectorAll('pre code').forEach(block => {
                hljs.highlightBlock(block);
            });
        }
    }
    
    // 添加代码复制按钮
    function addCopyButtons() {
        document.querySelectorAll('pre').forEach(block => {
            if (!block.querySelector('.copy-code')) {
                const button = document.createElement('button');
                button.className = 'copy-code';
                button.textContent = '复制';
                
                button.addEventListener('click', function() {
                    const code = block.querySelector('code').textContent;
                    copyToClipboard(code);
                    
                    // 修改按钮状态
                    this.textContent = '已复制!';
                    setTimeout(() => {
                        this.textContent = '复制';
                    }, 2000);
                });
                
                block.appendChild(button);
            }
        });
    }
    
    // 复制到剪贴板
    function copyToClipboard(text) {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = 0;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
    }
    
    // 显示提示信息
    function showToast(message) {
        // 检查是否已经存在toast
        let toast = document.querySelector('.toast-message');
        
        if (!toast) {
            toast = document.createElement('div');
            toast.className = 'toast-message';
            document.body.appendChild(toast);
        }
        
        // 设置消息内容并显示
        toast.textContent = message;
        toast.classList.add('show');
        
        // 2秒后隐藏
        setTimeout(() => {
            toast.classList.remove('show');
        }, 2000);
    }
    
    // 滚动到底部
    function scrollToBottom() {
        chatBox.scrollTop = chatBox.scrollHeight;
    }
    
    // 格式化时间
    function formatTime(date) {
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        return `${hours}:${minutes}`;
    }
    
    // 保存聊天历史到本地存储
    function saveChatHistory() {
        localStorage.setItem('chatHistory', chatBox.innerHTML);
    }
    
    // 加载聊天历史
    function loadChatHistory() {
        const history = localStorage.getItem('chatHistory');
        if (history) {
            chatBox.innerHTML = history;
            
            // 应用语法高亮
            highlightCode();
            addCopyButtons();
        }
    }
    
    // 清空聊天记录
    function clearChat() {
        if (confirm('确定要清空所有聊天记录吗？')) {
            chatBox.innerHTML = `
                <div class="system-message">
                    <div class="message-content">
                        <i class="fas fa-info-circle mr-2"></i>欢迎使用AI聊天助手，请输入您的问题。
                    </div>
                </div>
            `;
            localStorage.removeItem('chatHistory');
        }
    }
    
    // HTML转义
    function escapeHtml(unsafe) {
        return unsafe
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }
    
    // 添加复制提示样式
    function addToastStyle() {
        const style = document.createElement('style');
        style.textContent = `
            .toast-message {
                position: fixed;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                background-color: rgba(0, 0, 0, 0.7);
                color: white;
                padding: 8px 16px;
                border-radius: 4px;
                z-index: 1000;
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            
            .toast-message.show {
                opacity: 1;
            }
        `;
        document.head.appendChild(style);
    }
    
    // 添加提示样式
    addToastStyle();
}); 